$(function () {
  // 需求1: 初始化文章分类列表
  // 因为后面还要用
  let layer = layui.layer;
  initArtCateList();
  function initArtCateList() {
    //封装
    axios({
      method: "GET",
      url: "/my/article/cates",
    }).then((res) => {
      //判断
      if (res.data.status !== 0) {
        return layer.msg(res.data.message);
      }
      //渲染
      let arr = [];
      let index = 0;
      res.data.data.forEach((ele) => {
        index++;
        arr.push(`
        <tr>
        <td>${index}</td>
        <td>${ele.name}</td>
        <td>${ele.alias}</td>
        <td>
        <button data-id='${ele.Id}' class=" btn-edit layui-btn layui-btn-normal">编辑</button>
        <button data-id='${ele.Id}' class=" btn-delete layui-btn layui-btn-normal layui-btn-danger">删除</button>
        </td>
        </tr>
        `);
      });
      //循环完毕之后在赋值
      $("tbody").empty().html(arr.join(""));
    });
  }
  //需求2. 点击添加,显示对话框
  let indexAdd = null;
  $("#btnAdd").on("click", function () {
    indexAdd = layer.open({
      type: 1,
      title: "添加文字类别",
      area: ["500px", "300px"],
      content: ` <form class="layui-form" id='formAdd'>
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="name"
            required
            lay-verify="required"
            placeholder="分类名称"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
   
   
      <div class="layui-form-item">
        <label class="layui-form-label">分类别名</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="alias"
            required
            lay-verify="required"
            placeholder="分类别名"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
   
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">
          确认添加
        </button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
    </form>`,
    });
  });
  //需求3:添加文章分类.事件委托
  $("body").on("submit", "#formAdd", function (e) {
    e.preventDefault();
    axios({
      method: "POST",
      url: "/my/article/addcates",
      data: $(this).serialize(),
    }).then((res) => {
      // console.log(res.data);
      // TODO:判断.关闭对话框.填空表单,刷新页面
      if (res.data.status != 0) {
        return layer.msg(res.data.message);
      }
      //成功提示
      layer.msg("恭喜您,添加文章分类成功");
      //关闭对话框
      layer.close(indexAdd);
      //刷新页面
      initArtCateList();
    });
  });
  //需求四
  let indexEdit = null;
  let form = layui.form;
  $("tbody").on("click", ".btn-edit", function () {
    indexEdit = layer.open({
      type: 1,
      title: "修改文章分类",
      area: ["500px", "300px"],
      content: ` <form lay-filter='formEdit' class="layui-form" id='formEdit'>
      <input type='hidden' name='Id' />
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="name"
            required
            lay-verify="required"
            placeholder="分类名称"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
   
   
      <div class="layui-form-item">
        <label class="layui-form-label">分类别名</label>
        <div class="layui-input-block">
          <input
            type="text"
            name="alias"
            required
            lay-verify="required"
            placeholder="分类别名"
            autocomplete="off"
            class="layui-input"
          />
        </div>
      </div>
 
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">
          确认添加
        </button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
    </form>`,
    });
    //需求5
    let id = $(this).attr("data-id");
    axios({
      method: "GET",
      url: "/my/article/cates/" + id,
    }).then((res) => {
      console.log(res.data);
      if (res.data.status != 0) {
        return layer.msg(res.data.message);
      }
      //展示
      form.val("formEdit", res.data.data);
    });
  });
  //需求5
  $("body").on("submit", "#formEdit", function (e) {
    e.preventDefault();
    axios({
      method: "POST",
      url: "/my/article/updatecate",
      data: $(this).serialize(),
    }).then((res) => {
      if (res.data.status != 0) {
        return layer.msg(res.data.message);
      }
      layer.msg("恭喜您,修改文章分类完成!");
      layer.close(indexEdit);
      initArtCateList();
    });
  });
  //需求6
  $("tbody").on("click", ".btn-delete", function () {
    let id = $(this).attr("data-id");
    layer.confirm("确认删除吗?", { icon: 3, title: "提示" }, function (index) {
      axios({
        method: "GET",
        url: "/my/article/deletecate/" + id,
      }).then((res) => {
        if (res.data.status != 0) {
          return layer.msg(res.data.message);
        }
        layer.msg("恭喜您,删除文章分类成功");
        initArtCateList();
      });
      layer.close(index);
    });
  });
});
